<template>
  <div class="app-container">
    <el-row :gutter="48">
      <el-col :sm="24" :lg="12">
        <el-card
          v-loading="listLoading"
          element-loading-text="加载中"
        >
          <div slot="header" class="clearfix">
            <el-button type="text">愿望清单</el-button>

            <span class="operate-container">
              <el-button
                type="success"
                size="mini"
                icon="el-icon-plus"
                @click="add"
              >
                添加
              </el-button>
            </span>

          </div>
          <el-card
            v-for="(wishing,index) in wishingList"
            :key="index"
            :class="{'wish-row':index!==0}"
            shadow="hover"
          >
            <el-row :gutter="24">
              <el-col :span="18">
                <el-row>
                  <el-col :span="8">
                    <el-input
                      v-if="wishing.editName"
                      :ref="'editRefName' + wishing.id"
                      v-model="wishing.name"
                      size="small"
                      @keyup.enter.native="handleEditWishName(wishing)"
                      @blur="handleEditWishName(wishing)"
                    />

                    <el-tag @click="editName(wishing)">{{ wishing.name }}</el-tag>
                  </el-col>
                  <el-col :span="6">
                    <el-rate
                      v-model="wishing.star"
                      style="line-height: 2;"
                      @change="handUpdateStar(wishing)"
                    />
                  </el-col>
                </el-row>
                <div style="margin-top:20px">
                  <el-row>

                    <el-col :span="4">
                      <el-tag type="success">预计开销：</el-tag>
                    </el-col>
                    <el-col :span="6">

                      <el-input
                        v-if="wishing.editCost"
                        :ref="'editRefCost' + wishing.id"
                        v-model="wishing.costYuan"
                        size="small"
                        @keyup.enter.native="handleEditWishCost(wishing)"
                        @blur="handleEditWishCost(wishing)"
                      />

                      <el-tag v-else @click="editCost(wishing)">¥{{ wishing.cost | centToYuan }}</el-tag>
                    </el-col>
                  </el-row>
                </div>
              </el-col>
              <el-col :span="6">
                <el-button size="small" type="success" icon="el-icon-circle-check" @click="complete(wishing,index)">完成</el-button>
                <el-button size="small" type="danger" icon="el-icon-circle-close" @click="cancel(wishing,index)">取消</el-button>
              </el-col>
            </el-row>
          </el-card>
        </el-card>

      </el-col>

      <el-col :sm="24" :lg="12">
        <el-tabs v-model="wishTabName" type="border-card">
          <el-tab-pane name="complete">
            <span slot="label"><i class="el-icon-date" /> 已完成</span>
            <el-table
              v-loading="tabLoading"
              element-loading-text="加载中"
              :data="completedList"
              fit
            >
              <el-table-column align="center" property="name" width="200" label="愿望" />

              <el-table-column align="center" label="花费">
                <template slot-scope="scope">
                  <span>¥{{ scope.row.cost | centToYuan }}</span>
                </template>
              </el-table-column>

              <el-table-column align="center" label="完成时间">
                <template slot-scope="scope">
                  <span>{{ scope.row.removeTime | parseTime('{y}-{m}-{d}') }}</span>
                </template>
              </el-table-column>

              <el-table-column align="center" label="期望程度">
                <template slot-scope="scope">
                  <el-rate
                    v-model="scope.row.star"
                    disabled
                  />
                </template>
              </el-table-column>

              <el-table-column label="操作" align="center" class-name="operate-cell">
                <template slot-scope="scope">

                  <el-button
                    size="mini"
                    type="danger"
                    @click="remove(scope.row)"
                  >删除
                  </el-button>

                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane name="cancel">
            <span slot="label"><i class="el-icon-tickets" /> 已取消</span>
            <el-table
              v-loading="tabLoading"
              element-loading-text="加载中"
              :data="cancelList"
              fit
            >
              <el-table-column align="center" property="name" width="200" label="愿望" />

              <el-table-column align="center" label="花费">
                <template slot-scope="scope">
                  <span>¥{{ scope.row.cost | centToYuan }}</span>
                </template>
              </el-table-column>

              <el-table-column align="center" label="完成时间">
                <template slot-scope="scope">
                  <span>{{ scope.row.removeTime | parseTime('{y}-{m}-{d}') }}</span>
                </template>

              </el-table-column>

              <el-table-column align="center" label="期望程度">
                <template slot-scope="scope">
                  <el-rate
                    v-model="scope.row.star"
                    disabled
                  />
                </template>
              </el-table-column>

              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="remove(scope.row)"
                >删除
                </el-button>

              </template>
            </el-table>
            <pagination
              v-show="total.cancel >0"
              :total="total.cancel"
              :page-sync="listQuery.cancel.pageNum"
              :limit.sync="listQuery.cancel.pageLimit"
              @pagination="getCancelList"
            />
          </el-tab-pane>
        </el-tabs>

      </el-col>
    </el-row>

    <el-dialog
      title="新增愿望"
      :visible.sync="editOperFormVisible"
      center
      width="30%"
    >
      <el-form
        ref="editOperForm"
        :rules="editOperFormRules"
        :model="editOperForm"
      >
        <el-form-item label="名称：" prop="name">
          <el-input
            v-model="editOperForm.name"
            placeholder="名称"
          />
        </el-form-item>
        <el-form-item label="期望度：" prop="name">
          <el-rate
            v-model="editOperForm.star"
            style="line-height: 2.5;"
          />
        </el-form-item>
        <el-form-item label="预计开销：">
          <el-input
            v-model="editOperForm.cost"
            type="number"
            placeholder="预计开销"
          />
        </el-form-item></el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editOperFormVisible = false">取 消</el-button>
        <el-button :loading="loading" type="primary" @click="handleSaveWish">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

import {
  getList,
  create,
  removeById,
  updateStatus,
  updateName,
  updateCost,
  updateStar,
  getPageList
} from '@/api/life/wish'

import { parseTime } from '@/utils'

export default {
  name: 'Wish',
  data() {
    return {
      wishingList: [],
      cancelList: [],
      completedList: [],
      wishTabName: 'complete',

      tabLoading: false,
      loading: false,
      listLoading: false,
      editNameVisible: false,

      listQuery: {
        complete: {
          sorts: '-removeTime',
          pageNum: 1,
          pageLimit: 10
        },
        cancel: {
          sorts: '-removeTime',
          pageNum: 1,
          pageLimit: 10
        }
      },
      total: {
        complete: 0,
        cancel: 0
      },

      editOperFormVisible: false,
      editOperForm: {},
      editOperFormRules: {
        name: [{ required: true, trigger: 'blur', message: '缺少愿望名' }]
      }
    }
  },
  watch: {
    wishTabName: function(newValue) {
      if (newValue === 'complete') {
        this.getCompletedList()
      } else {
        this.getCancelList()
      }
    }
  },
  created() {
    this.getWishingList()
    this.getCompletedList()
  },
  methods: {
    getWishingList() {
      this.listLoading = true
      getList({
        status: 0
      }).then(res => {
        res.data.map(item => {
          item.editName = false
          item.editCost = false
          item.costYuan = Number(item.cost / 100).toFixed(2)
        })
        this.wishingList = res.data
        this.listLoading = false
      })
    },
    getCompletedList() {
      this.tabLoading = true
      getPageList({
        status: 1
      }).then(res => {
        this.completedList = res.data.records
        this.tabLoading = false
      })
    },
    getCancelList() {
      this.tabLoading = true
      getPageList({
        status: 2
      }).then(res => {
        this.cancelList = res.data.records
        this.tabLoading = false
      })
    },
    handleTabClick(tab, event) {
      console.log(tab)
      console.log(event)
    },
    add() {
      this.editOperForm = {}
      this.editOperFormVisible = true
    },
    editName(wish) {
      wish.editName = true
      this.$nextTick(_ => {
        this.$refs['editRefName' + wish.id][0].focus()
      })
    },
    editCost(wish) {
      wish.editCost = true
      this.$nextTick(_ => {
        this.$refs['editRefCost' + wish.id][0].focus()
      })
    },
    handleEditWishName(wish) {
      updateName(wish.id, wish.name).then(_ => {
        wish.editName = false
      })
    },
    handleEditWishCost(wish) {
      updateCost(wish.id, wish.costYuan * 100).then(_ => {
        wish.editCost = false
      })
    },
    handUpdateStar(wish) {
      updateStar(wish.id, wish.star).then(_ => {
        console.log('update success')
      })
    },
    handleSaveWish() {
      this.$refs.editOperForm.validate(valid => {
        if (valid) {
          this.$confirm('是否提交数据', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            const params = Object.assign({}, this.editOperForm)

            // 转换为分
            params.cost = params.cost * 100

            this.$confirm('是否保存?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              create(params).then(_ => {
                this.$message.success('新增愿望成功!')
                this.editOperFormVisible = false
                this.getWishingList()
              })
            })
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    complete(wish, index) {
      this.$confirm('是否标记愿望完成?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateStatus(wish.id, 1).then(_ => {
          wish.status = 1
          this.wishingList.splice(index, 1)
          wish.removeTime = parseTime(new Date(), '{y}-{m}-{d}')
          this.completedList.unshift(wish)
        })
      })
    },
    cancel(wish, index) {
      this.$confirm('是否取消愿望?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateStatus(wish.id, 2).then(_ => {
          wish.status = 2
          this.wishingList.splice(index, 1)
          wish.removeTime = parseTime(new Date(), '{y}-{m}-{d}')
          this.cancelList.unshift(wish)
        })
      })
    },
    remove(row) {
      this.$confirm('是否要删除愿望?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeById(row.id).then(_ => {
          if (this.wishTabName === 'complete') {
            this.getCompletedList()
          } else {
            this.getCancelList()
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.wish-row{
  margin-top:20px;
}

</style>
